<template>
  <globle-dialog ref="globleDialogRef" :title="globleDialogConfig.title" :btn="{ isShowBtn: false }" @onBeforeColse="onBeforeColse">
    <div>
      <article class="type-text">课程信息</article>
      <el-divider />
      <globle-form ref="courseFormRef" :bindData="courseFormConfig.bindData"
        :itemConfig="courseFormConfig.itemConfig"></globle-form>
      <article class="type-text">教师信息</article>
      <el-divider />
      <globle-form ref="tchFormRef" :bindData="tchFormConfig.bindData"
        :itemConfig="tchFormConfig.itemConfig"></globle-form>
    </div>
  </globle-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { formType, IGlobleFormProps } from '../../../components/form/type';

const globleDialogRef = ref();
const tchFormRef = ref();
const courseFormRef = ref();
const globleDialogConfig = { title: '选课详情' };
const courseFormConfig: IGlobleFormProps = reactive({
  bindData: {} as any,
  itemConfig: [
    { type: formType.input, label: '学年', prop: 'schoolYear',disabled:true },
    { type: formType.input, label: '学期', prop: 'stage',disabled:true },
    { type: formType.input, label: '年级', prop: 'grade',disabled:true },
    { type: formType.input, label: '课程代码', prop: 'courseCode',disabled:true },
    { type: formType.input, label: '课程名称', prop: 'courseName',disabled:true },
    { type: formType.input, label: '教学班', prop: 'teachClass',disabled:true },
    { type: formType.input, label: '课程星期', prop: 'weekDay',disabled:true },
    { type: formType.input, label: '课程序号', prop: 'orderNum',disabled:true },
    { type: formType.input, label: '课程周数', prop: 'week',disabled:true },
    { type: formType.input, label: '开课学院', prop: 'openCollege',disabled:true },
    { type: formType.input, label: '开课类型', prop: 'courseType',disabled:true },
    { type: formType.input, label: '学时类型', prop: 'classHourType',disabled:true },
    { type: formType.input, label: '课程学分', prop: 'credit',disabled:true },
    { type: formType.input, label: '总学时', prop: 'totalHours',disabled:true },
    { type: formType.input, label: '任务人数', prop: 'maxPerson',disabled:true },
    { type: formType.input, label: '已选人数', prop: 'selectedNum',disabled:true },
    { type: formType.input, label: '课程地点', prop: 'place',disabled:true },
    { type: formType.textarea, label: '面向对象', prop: 'allowBand', width: 512,disabled:true },
  ],
});
const tchFormConfig: IGlobleFormProps = reactive({
  bindData: {} as any,
  itemConfig: [
    { type: formType.input, label: '教师姓名', prop: 'name',disabled:true },
    { type: formType.select, label: '教师性别', prop: 'sex',options:[{label: '男',value: 1},{label: '女',value: 0}],disabled:true },
    { type: formType.input, label: '联系电话', prop: 'phone',disabled:true },
    { type: formType.input, label: 'QQ号码', prop: 'qq',disabled:true },
  ],
});

const openByCheck = (row: any) => {
  globleDialogRef.value.isShowDialog = true;
  courseFormConfig.bindData = row.course;
  tchFormConfig.bindData = row.teacher;
  // console.log('11',globleFormConfig.bindData);
};

const onBeforeColse = () => {
  globleDialogRef.value.isShowDialog = false;
};

defineExpose({ openByCheck });
</script>

<style scoped lang="scss">
.el-divider {
  margin-top: 8px;
}

.el-form {
  margin-bottom: 16px;
}

.type-text {
  font-size: 16px;
  font-weight: bold;
  color: var(--font-color);
}
</style>
